---
title: Configuration de l'éditeur de code
description: Configurer votre éditeur de code pour développer avec Astro.
i18nReady: true
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"

Personnalisez votre éditeur de code pour améliorer l'expérience de développement avec Astro et débloquer de nouvelles fonctionnalités.

## VS Code

[VS Code](https://code.visualstudio.com/) est un éditeur de code populaire pour les développeurs web, conçu par Microsoft. Le moteur de VS Code alimente également des éditeurs de code populaires dans le navigateur comme [GitHub Codespaces](https://github.com/features/codespaces) et [Gitpod](https://gitpod.io/).

Astro fonctionne avec n'importe quel éditeur de code. Cependant, VS Code est l'éditeur que nous recommandons pour les projets Astro. Nous maintenons une [extension Astro officielle pour VS Code](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) qui débloque plusieurs fonctionnalités clés et améliore l'expérience des développeurs pour les projets Astro.

- Coloration syntaxique pour les fichiers `.astro`.
- Informations sur le typage TypeScript pour les fichiers `.astro`.
- [Intellisense VS Code](https://code.visualstudio.com/docs/editor/intellisense) pour l'autocomplétion, les suggestions et plus encore.

Pour commencer, installez l'[extension Astro pour VS Code](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) dès maintenant.

import ReadMore from '~/components/ReadMore.astro';

<ReadMore>Découvrez comment [configurer TypeScript](/fr/guides/typescript/) dans votre projet Astro.</ReadMore>

## Zed

[Zed](https://zed.dev/) est un éditeur de code collaboratif de haute performance, optimisé pour la vitesse et les projets d'envergure. Leur [extension Astro](https://zed.dev/extensions/astro) inclut des fonctionnalités telles que la coloration syntaxique pour les fichiers `.astro`, la saisie semi-automatique du code, le formatage, les diagnostics et l'accès direct aux définitions.

## Les IDE de JetBrains

[Webstorm](https://www.jetbrains.com/webstorm/) est un IDE JavaScript et TypeScript qui a ajouté la prise en charge d'Astro Language Server dans la version 2024.2. Cette mise à jour apporte des fonctionnalités telles que la coloration syntaxique, la saisie semi-automatique du code et la mise en forme.

Installez le module d'extension officiel via [le marketplace de JetBrains](https://plugins.jetbrains.com/plugin/20959-astro) ou en recherchant « Astro » dans l'onglet Plugins de l'IDE. Vous pouvez activer/désactiver le serveur de langue dans `Settings | Languages & Frameworks | TypeScript | Astro`.

Pour plus d'informations sur la prise en charge d'Astro dans Webstorm, consultez [la page Astro dans la documentation officielle de Webstorm](https://www.jetbrains.com/help/webstorm/astro.html).

## Autres éditeurs de code

Notre incroyable communauté gère plusieurs extensions pour d'autres éditeurs populaires, notamment :

- [Extension VS Code sur Open VSX](https://open-vsx.org/extension/astro-build/astro-vscode) <span style="margin: 0.25em;"><Badge text="Officiel" /></span> - L'extension Astro officielle pour VS Code, disponible dans le registre Open VSX pour les éditeurs tels que [Cursor](https://cursor.com) et [VSCodium](https://vscodium.com/)
- [Module d'extension Vim](https://github.com/wuelnerdotexe/vim-astro) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="Communautaire" /></span> - Fournit la coloration syntaxique, l'indentation et la prise en charge du repli de code pour Astro à l'intérieur de Vim ou Neovim.
- Modules d'extension [LSP](https://github.com/neovim/nvim-lspconfig/blob/master/doc/configs.md#astro) et [TreeSitter](https://github.com/virchau13/tree-sitter-astro) pour Neovim <span style="margin: 0.25em;"><Badge class="neutral-badge" text="Communautaire" /></span> - Fournit la coloration syntaxique, l'analyse des répertoires et la complétion du code pour Astro dans Neovim.
- Emacs - Voir les instructions pour [configurer Emacs et Eglot](https://medium.com/@jrmjrm/configuring-emacs-and-eglot-to-work-with-astro-language-server-9408eb709ab0) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="Communautaire" /></span> pour fonctionner avec Astro
- [Coloration syntaxique Astro pour Sublime Text](https://packagecontrol.io/packages/Astro) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="Communautaire" /></span> - Le paquet Astro pour Sublime Text, disponible dans le gestionnaire de paquets de Sublime Text.
- [Extension Nova](https://extensions.panic.com/extensions/sciencefidelity/sciencefidelity.astro/) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="Communautaire" /></span> - Fournit la coloration syntaxique et la complétion de code pour Astro à l'intérieur de Nova

## Éditeur de code dans le navigateur

En plus des éditeurs locaux, Astro fonctionne également bien dans les éditeurs hébergés dans le navigateur, notamment :

- [StackBlitz](https://stackblitz.com/) et [CodeSandbox](https://codesandbox.io/) - des éditeurs en ligne qui s'exécutent dans votre navigateur, avec prise en charge intégrée de la coloration syntaxique pour les fichiers `.astro`. Aucune installation ou configuration n'est nécessaire !
- [GitHub.dev](https://github.dev/) - vous permet d'installer l'extension Astro pour VS Code en tant qu'[extension web](https://code.visualstudio.com/api/extension-guides/web-extensions), ce qui ne vous donne accès qu'à certaines des fonctionnalités complètes de l'extension. Actuellement, seule la coloration syntaxique est prise en charge.
- [IDX](https://idx.dev) et [Gitpod](https://gitpod.io/) - un environnement de développement complet dans le cloud qui peut installer l'extension officielle Astro pour VS Code depuis Open VSX.

## Autres outils

### ESLint

[ESLint](https://eslint.org/) est un linter populaire pour JavaScript et JSX. Pour la prise en charge d'Astro, [un module d'extension maintenu par la communauté](https://github.com/ota-meshi/eslint-plugin-astro) peut être installé.

Voir [le guide de l'utilisateur du projet](https://ota-meshi.github.io/eslint-plugin-astro/user-guide/) pour plus d'informations sur l'installation et la configuration d'ESLint pour votre projet.

### Stylelint

[Stylelint](https://stylelint.io/) est un linter populaire pour CSS. [Une configuration Stylelint maintenue par la communauté](https://github.com/ota-meshi/stylelint-config-html) fournit la prise en charge d'Astro. 

Les instructions d'installation, l'intégration à l'éditeur et d'autres informations sont disponibles dans le README du projet.

### Biome

[Biome](https://biomejs.dev/) est un linter et un formateur tout-en-un pour le web. [Biome dispose actuellement d'une prise en charge expérimentale pour les fichiers `.astro`](https://biomejs.dev/internals/language-support/#html-super-languages-support), et peut être utilisé pour analyser et formater le frontmatter dans les fichiers `.astro`.

### Prettier

[Prettier](https://prettier.io/) est un formateur populaire pour JavaScript, HTML, CSS, et plus encore. Si vous utilisez l'[extension Astro pour VS Code](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode), le formatage du code avec Prettier est inclus.

Pour ajouter la prise en charge du formatage des fichiers `.astro` en dehors de l'éditeur (par exemple, la CLI) ou dans des éditeurs qui ne prennent pas en charge notre outil d'édition, installez [le module d'extension officiel Prettier d'Astro](https://github.com/withastro/prettier-plugin-astro).

<Steps>
1. Installez `prettier` et `prettier-plugin-astro`.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell 
      npm install --save-dev --save-exact prettier prettier-plugin-astro
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm add --save-dev --save-exact prettier prettier-plugin-astro
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn add --dev --exact prettier prettier-plugin-astro
      ```
      </Fragment>
    </PackageManagerTabs>

2. Créez un fichier de configuration `.prettierrc.mjs` (ou `.prettierrc.json`, `.prettierrc.mjs`, ou [dans d'autres formats pris en charge](https://prettier.io/docs/configuration)) à la racine de votre projet et ajoutez-y `prettier-plugin-astro`.

    Dans ce fichier, vous pouvez également spécifier manuellement l'analyseur pour les fichiers Astro.

    ```json title=".prettierrc"
    {
      "plugins": ["prettier-plugin-astro"],
      "overrides": [
        {
          "files": "*.astro",
          "options": {
            "parser": "astro"
          },
        },
      ],
    };
    ```

3. En option, installez d’autres modules d'extension Prettier pour votre projet et ajoutez-les au fichier de configuration. Ces modules d'extension supplémentaires devront peut-être être listés dans un ordre spécifique. Par exemple, si vous utilisez Tailwind, `prettier-plugin-tailwindcss` doit être [le dernier module d'extension Prettier dans le tableau des modules d'extension](https://github.com/tailwindlabs/prettier-plugin-tailwindcss#compatibility-with-other-prettier-plugins).

    ```json title=".prettierrc"
    {
      "plugins": [
        "prettier-plugin-astro",
        "prettier-plugin-tailwindcss" // doit être le dernier
      ],
      "overrides": [
        {
          "files": "*.astro",
          "options": {
            "parser": "astro"
          }
        }
      ]
    }
    ```

4. Exécutez la commande suivante dans votre terminal pour formater vos fichiers.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npx prettier . --write
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm exec prettier . --write
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn exec prettier . --write
      ```
      </Fragment>
    </PackageManagerTabs>
</Steps>

Consultez le [fichier README du module d'extension Prettier](https://github.com/withastro/prettier-plugin-astro/blob/main/README.md) pour plus d'informations sur les options prises en charge, comment configurer Prettier dans VS Code, et plus encore.

### dprint

[dprint](https://dprint.dev/) est un formateur de code hautement configurable prenant en charge de nombreux langages, dont JavaScript, TypeScript, CSS, etc. La prise en charge des fichiers `.astro` peut être ajoutée à l'aide du [module d'extension markup_fmt](https://github.com/g-plane/markup_fmt).
